<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<p v-once>单价：{{price|currency}}</p><br />
			数量：<input type="number" v-model.number="num" /><br />
			<p>总价：{{sum}}</p><br />
			<p>运费：{{yunfei|currency("$")}}</p><br />
			<p>应付：{{pay}}</p><br />
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
	//filter()过滤器  dom上要这样写{{price|currency(参数)}}
	Vue.filter("currency",(...rest)=>{
		console.log(rest);//rest为数组
		if(rest.length==1){//没传参数
			return "￥"+rest[0];
		}else{//有参数
			return rest[1]+rest[0];
		}
	})
	const vm = new Vue({
		el:"#app",
		data:{
			price:30,
			num:0,
			yunfei:10
		},
		computed:{
			sum(){
				return this.price*this.num;
			},
			pay(){
				if(this.sum<=199){
					return this.price*this.num+this.yunfei;
				}else{
					return this.price*this.num;
				}
			}
		}
	})
</script>